<script lang="ts" setup>
import { reactive, toRefs, ref, watch } from "vue" // vue
import { getPDdevotedApi } from "@/api/SZ/PDdevoted" // 接口
import { getqueryTeamName } from "@/api/SZ/SZXxfy" // 接口
import { FormInstance } from "element-plus" // elment
import { Search, Refresh } from "@element-plus/icons-vue" // 按钮图标
import { shortcuts } from "@/utils/dateSet"
import { usePagination } from "@/hooks/usePagination" // 分页器
// 缓存
defineOptions({
  name: "PDdevoted"
})
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 0)]

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination() // 分页器
const data = reactive<any>({
  searchData: {
    createTime: "", // 创建时间
    shopId: undefined // 店铺
  }
})

const { searchData } = toRefs(data)
// #region 查

const loading = ref(true)
const tableData = ref<any>([]) //
const tablelist = async () => {
  if (!searchData.value.createTime) {
    searchData.value.createTime = []
  }
  if (!searchData.value.stateTime) {
    searchData.value.stateTime = []
  }
  await getPDdevotedApi({
    ...searchData.value,
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    StartTime: new Date(searchData.value.createTime[0]).getTime() || "", // 时间
    EndTime: new Date(searchData.value.createTime[1]).getTime() || "" // 时间
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      tableData.value = []
    })
}
tablelist()

// 订单来源根据部门查团队
const queryTeamName = ref()
const TeamName = async () => {
  await getqueryTeamName().then((res: any) => {
    queryTeamName.value = res.data
  })
}
TeamName()
// #endregion

// #region 搜索内容
const searchFormRef = ref<FormInstance | null>(null)
// 搜索
function handleSearch() {
  tablelist()
  console.log(searchData.value, "搜索")
}
// 重置
function resetSearch() {
  searchFormRef.value?.resetFields()
  handleSearch()
}
// #endregion

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], tablelist, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-row justify="center" align="middle">
        <el-col>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="createTime" label="时间">
              <el-date-picker
                v-model="searchData.createTime"
                type="datetimerange"
                range-separator="到"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :default-time="defaultTime1"
              />
            </el-form-item>
            <el-form-item prop="shopId" label="店铺">
              <el-select
                v-model.trim="searchData.shopId"
                clearable
                filterable
                placeholder="请选择订单来源"
                style="width: 240px"
              >
                <el-option v-for="item in queryTeamName" :key="item.id" :label="item.name" :value="item.id + ''" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 刷单明细 -->
    <el-card class="top">
      <div class="mxbox">
        <el-button type="primary" plain>拼多多收入、退款、保证金、推广费</el-button>
      </div>
      <el-table :data="tableData" border ref="tableRef" v-loading="loading">
        <el-table-column prop="id" label="id" align="center" />
        <el-table-column prop="manageTime" label="操作时间" align="center" />
        <el-table-column prop="manageName" label="操作人" align="center" />
        <el-table-column prop="shopId" label="店铺id" align="center" />
        <el-table-column prop="shopName" label="店铺名称" align="center" />
        <el-table-column prop="dt" label="日期" align="center" />
        <el-table-column prop="incomeAmount" label="收入" align="center" />
        <el-table-column prop="refundAmount" label="退款金额" align="center" />
        <el-table-column prop="earnestAmount" label="保证金退款" align="center" />
        <el-table-column prop="advertisingFee" label="推广费" align="center" />
        <el-table-column prop="orderCount" label="订单量" align="center" />
        <el-table-column prop="refundCount" label="退单量" align="center" />
      </el-table>
      <!-- 分页器 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :page-size="paginationData.pageSize"
          :total="paginationData.total"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
.widthsmall {
  width: 80%;
}
.top {
  margin-top: 20px;
}
.mxbox {
  display: flex;
  justify-content: space-between;
}
.mxboxRight {
  margin-right: 10%;
}
</style>
